<template>
    <view class="">
        <view
            class="content"
            :style="{ backgroundImage: `url(${site_config.front_background})` }"
            v-if="site_config">
            <u-navbar
                :title="title"
                @rightClick="rightClick"
                :autoBack="true"
                placeholder
                :bgColor="bgColor"
                :leftIconColor="leftIconColor"
                :titleStyle="titleStyle">
            </u-navbar>
            <!-- <navBar title="秀宴"></navBar> -->
            <!-- <status-bar title="秀宴"></status-bar> -->
            <!-- <status-bar title=" " hideBg="1" statusHeight backColor :back="back"></status-bar> -->
            <view class="Box">
                <scroll-view scroll-y="true" class="scrollView" @scroll="Scroll">
                    <movable-area
                        class="movable-area"
                        :style="{ height: bgImgHeight + 'rpx' }"
                        :scale-area="true">
                        <movable-view
                            class="movable-view"
                            :out-of-bounds="false"
                            direction="all"
                            :scale="true"
                            :scale-min="1"
                            :scale-value="scaleValue"
                            :disabled="Disabled"
                            @scale="scaleView">
                            <view
                                class="list"
                                v-for="(item, index) in site_location"
                                :key="index"
                                :style="{
                                    width: item.width + 'rpx',
                                    height: item.height + 'rpx',
                                    left: item.x + 'rpx',
                                    top: item.y + 'rpx',
                                }"
                                @click="selectTab(item)">
                                <image
                                    :src="$imgUrls(item.choose_log)"
                                    class="list_img"
                                    v-if="item.select == 1"></image>
                                <block v-else>
                                    <image
                                        :src="$imgUrls(item.empty_log)"
                                        class="list_img"
                                        v-if="
                                            item.order_state == 0 || item.order_state == 2
                                        "></image>
                                    <image
                                        :src="$imgUrls(item.order_log)"
                                        class="list_img"
                                        v-if="item.order_state == 1">
                                    </image>
                                </block>
                            </view>

                            <image
                                :src="$imgUrls(site_config.background)"
                                mode="widthFix"
                                class="rows"></image>
                        </movable-view>
                    </movable-area>
                </scroll-view>
                <view class="box_Tip">
                    <view class="box_Tip_list">
                        <view
                            class="type_config"
                            v-for="(item, index) in type_configs"
                            :key="item.id">
                            <image
                                :src="$imgUrls(item.empty_log)"
                                class="type_config_log m-right4"></image>
                            <text class="type_config_name">{{ item.type_name }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <view class="footer">
                <view class="details">
                    <view class="d-flex a-center">
                        <text class="size34 bold">{{ details.open_date }}</text>
                        <text class="open_time size34 bold">{{ details.open_time }}</text>
                        <text class="size34 bold">{{ details.name }}</text>
                    </view>
                    <!-- <view class="d-flex a-center">
					<text class="details_txt">预约妆造 余位：</text>
					<text class="details_txt"
						>{{ details.make_up_num }}/{{ details.make_up_num_total }}</text
					>
				</view> -->
                </view>

                <!-- <scroll-view scroll-x="true" class="rows nowrap m-top14" v-if="selectArr.length">
					<view class="tableList" v-for="(item, index) in selectArr" :key="index">
						<text class="tableList_name">{{ item.type_name }}-{{ item.name }}</text>
						
					</view>
				</scroll-view> -->
                <view class="row" v-if="selectArr.length">
                    <view class="tableList" v-for="(item, index) in selectArr" :key="index">
                        <text class="tableList_name">{{ item.type_name }} {{ item.name }}</text>
                    </view>
                </view>

                <view class="Givemoney" v-if="selectArr.length">
                    <view class="MoneyBox">
                        <view class="d-flex a-center">
                            <text class="Earnest">选座定金</text>
                            <text class="EarnestMoney">￥{{ priceObj.order_price }}</text>
                        </view>
                        <view class="d-flex a-center">
                            <text class="Copewith">应付金额</text>
                            <text class="CopewithMoney">￥{{ priceObj.site_price }}</text>
                        </view>
                    </view>
                    <view class="continum" @click="chooseSite">立即预定</view>
                </view>

                <view class="Make_btn" v-else>请选择座席</view>
            </view>

            <u-modal
                :show="show"
                title="温馨提示"
                :content="site_config.tel_desc"
                :closeOnClickOverlay="true"
                confirmText="立即联系"
                confirmColor="#e0bb71"
                @close="show = false"
                @confirm="Confirm"></u-modal>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                scaleValue: 1,
                details: '',
                id: '',
                type_config: [],
                type_configs: [
                    {
                        empty_log: 'https://msraimgcdn.mogoie.com/6142/1735179248667.png',
                        type_name: '柱 子',
                    },
                    {
                        empty_log: 'https://msraimgcdn.mogoie.com/6142/1735122489284.png',
                        type_name: '可预定',
                    },
                    {
                        empty_log: 'https://msraimgcdn.mogoie.com/6142/1735206371068.png',
                        type_name: '已选择',
                    },
                    {
                        empty_log: 'https://msraimgcdn.mogoie.com/6142/1735122618115.png',
                        type_name: '不可预定',
                    },
                    {
                        empty_log: 'https://msraimgcdn.mogoie.com/6142/1752203474021.png',
                        type_name: '学生餐',
                    },
                ],
                site_config: '',
                site_location: [],
                selectArr: [],
                Disabled: true,
                priceObj: '',
                show: false,
                titleStyle: {
                    fontWeight: 'bold',
                    color: '#303133',
                },
                bgColor: '#fff',
                leftIconColor: '#303133',
            };
        },
        onLoad(opt) {
            if (opt.id) this.id = opt.id;
            this.getSiteTimeDetail();
        },

        methods: {
            getSiteTimeDetail() {
                this.$showLoading('');
                this.$http
                    .get({
                        url: '/SiteApiV2/getSiteTimeDetail',
                        data: {
                            id: this.id,
                        },
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        const Result = res.data;
                        this.details = Result;
                        this.site_config = Result.site_config;
                        Result.site_location.forEach((item) => {
                            item.width = Math.round(Number(Result.site_config.width));
                            item.height = Math.round(Number(Result.site_config.height));
                            item.x = Math.round(Number(item.x));
                            item.y = Math.round(Number(item.y));
                            let userItem = Result.type_config.find((n) => n.id == item.site_type);

                            if (userItem) {
                                if (item.student == 1) {
                                    item.empty_log = userItem.student_log;
                                } else {
                                    item.empty_log = userItem.empty_log;
                                }

                                item.choose_log = userItem.choose_log;
                                item.order_log = userItem.order_log;
                                item.type_name = userItem.type_name;
                            }
                        });
                        this.site_location = Result.site_location;
                        this.type_config = Result.type_config || [];
                    });
            },
            selectTab(item) {
                if (this.scaleValue == 1) this.scaleValue = 1.5;
                if (item.order_state == 1) return this.$Toast('该座位已被预约，请重新选择');
                if (item.order_state == 2) return;
                if (item.tel == 1) return (this.show = true);
                const Flag = this.containsObjectWithData(this.selectArr, 'id', item.id);
                const Index = this.site_location.findIndex((n) => n.id == item.id);
                if (Flag) {
                    const selectIndex = this.selectArr.findIndex((n) => n.id == item.id);
                    this.selectArr.splice(selectIndex, 1);
                    this.site_location[Index].select = 0;
                } else {
                    this.selectArr.push(item);
                    this.site_location[Index].select = 1;
                }
                if (this.selectArr.length) this.getSitePriceInfo();
            },

            getSitePriceInfo() {
                let site_ids = [];
                this.selectArr.forEach((item) => {
                    site_ids.push(item.id);
                });
                this.$http
                    .get({
                        url: '/SiteApiV2/getSitePriceInfo',
                        data: {
                            site_id: site_ids.join(','),
                            time_id: this.id,
                        },
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const Result = res.data;
                        this.priceObj = Result;
                    });
            },

            chooseSite() {
                if (!this.selectArr.length) return;
                this.$showLoading('座位锁定中~');
                let site_ids = [];
                this.selectArr.forEach((item) => {
                    site_ids.push(item.id);
                });
                this.$http
                    .post({
                        url: '/SiteApiV2/chooseSite',
                        data: {
                            site_id: site_ids.join(','),
                            time_id: this.id,
                        },
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        // if (res.data) this.toUrl(`orderDetails?order_id=${res.data}`);
                        if (res.data) this.toUrl(`detailsPlus?order_id=${res.data}`);
                    });
            },

            scaleView(e) {
                const scale = e.detail.scale;
                scale > 1 ? (this.Disabled = false) : (this.Disabled = true);
            },
            Scroll(e) {
                // console.log(e,'1');
            },

            containsObjectWithData(objects, key, value) {
                return objects.some((obj) => obj[key] === value);
            },

            Confirm() {
                this.$common.Tel(this.site_config.tel);
            },
        },

        computed: {
            ...mapState(['config_shop', 'config_shop_id']),
            title() {
                if (!this.config_shop.length) return;
                const Shop = this.config_shop.find((n) => n.config_shop_id == this.config_shop_id);

                return Shop ? Shop.name : '';
            },
            bgImgHeight() {
                if (!this.site_config) return;
                return Math.round(Number(this.site_config.img_h));
                // return Math.round(Number(this.site_config.img_h) * 0.81);
                // return Math.round(Number(this.site_config.img_h));
            },
        },
        watch: {
            scaleValue(newVal, oldVal) {
                if (newVal && newVal > 1) {
                    this.Disabled = false;
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .content {
        width: 100%;
        height: 100vh;
        // background-color: transparent;
        box-sizing: border-box;
        background-size: cover;
        background-position: center;
        padding: 10rpx 0 200rpx 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        // background-color: #4a3721;
    }

    .Box {
        width: 750rpx;

        height: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        background-size: 100% 100%;
        background-position: center;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
    }

    .box_Ten {
        width: 540rpx;
        // flex:1;
        // margin: 80rpx auto 0;
        overflow: scroll;
        position: relative;
        text-align: center;
        border: 1px solid red;
    }

    .scrollView {
        width: 750rpx;
        margin: 0 auto;
        z-index: 9999;
    }

    .Tanine {
        width: 100%;
    }

    .Tanine_in {
        width: 100%;
        height: 1000rpx;
    }

    .movable-area {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: relative;
        z-index: 8988;
    }

    .movable-view {
        width: 100%;
        height: 100%;
    }

    .list {
        position: absolute;
        z-index: 10;
    }

    .list_img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .boxBgimg {
        width: 750rpx;
        height: 1349rpx;
    }

    // .boxBgimg{
    // 	width:750rpx;
    // 	height:1349rpx;
    // }

    .box_Tip {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }

    .box_Tip_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 20rpx;
    }

    .type_config {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        margin: 10rpx;
    }

    .type_config_log {
        width: 28rpx;
        height: 28rpx;
        display: inline-block;
    }

    .type_config_name {
        font-size: 24rpx;
        margin-left: 4rpx;
        color: #000;
        display: inline-block;
    }

    .footer {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1000;
        padding: 40rpx 30rpx;
        background-color: #ffffff;
        border-radius: 20rpx 20rpx 0 0;

        border-bottom: none;
        display: flex;
        flex-direction: column;
        z-index: 101000;
    }

    .details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000;
    }

    .details_txt {
        font-size: 24rpx;
    }

    .open_time {
        margin: 0 8rpx;
    }

    .Make_btn {
        width: 100%;
        height: 80rpx;
        background-color: $color_d85;
        color: #fff;
        font-size: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30rpx;
        border-radius: 10rpx;
    }

    .tableList {
        background-color: $color_d85;
        padding: 8rpx 20rpx;
        border-radius: 6rpx;
        margin-right: 16rpx;
        margin-top: 20rpx;
        display: inline-block;
    }

    .tableList_name {
        color: #fff;
        font-size: 28rpx;
    }

    .Givemoney {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 30rpx;
    }

    .MoneyBox {
        display: flex;
        flex-direction: column;
    }

    .Earnest {
        color: $color_d85;
        font-size: 26rpx;
        margin-right: 4rpx;
    }

    .EarnestMoney {
        color: $color_d85;
        font-size: 34rpx;
        font-weight: bold;
    }

    .Copewith {
        color: #000;
        font-size: 26rpx;
        margin-right: 4rpx;
    }

    .CopewithMoney {
        color: #000;
        font-size: 28rpx;
        padding-left: 4rpx;
    }

    .continum {
        width: 380rpx;
        height: 90rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 34rpx;
        color: #fff;
        border-radius: 45rpx;
        background-color: $color_d85;
        border: 4rpx solid #ff9f99;
    }
</style>
